<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>iLEADER</title>
    <link rel="stylesheet" href="../dist/lib/layui/css/layui.css">
    <link rel="stylesheet" href="../dist/lib/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="../dist/css/main.css">
</head>
<body>
<!-- header start -->
<div class="ileader-header">
    <div class="ileader-main layui-clear">
        <a href="index.html" class="logo"><img src="../dist/images/logo.png" alt=""></a>
        <ul class="nav-list">
            <li class="list-item"><a href="#">下载APP</a></li>
            <li class="list-item">
                <form class="layui-form search-box">
                    <div class="layui-input-inline">
                        <input type="text" name="seachInfo" class="layui-input search-input" placeholder="搜索课程信息" autocomplete="off">
                    </div>
                    <button class="layui-btn layui-btn-normal search-btn" lay-submit lay-filter="formDemo"></button>
                </form>
            </li>
            <!-- 登录前 -->
            <!--<li class="list-item">-->
            <!--<a href="javascript:;" class="js-header-register">注册</a> / <a href="javascript:;" class="js-header-signIn">登录</a>-->
            <!--</li>-->
            <!--<li class="list-item item-user">-->
            <!--<span class="user-head"><img src="../dist/images/user_head.png" class="" alt=""></span>-->
            <!--</li>-->
            <!-- 登录后 -->
            <li class="list-item list-item-after">
                <a href="m-news.html" class="user-news active">消息</a>
                <a href="m-online-course.html">个人中心</a>
            </li>
            <li class="list-item item-user">
                <span class="user-name">黑眼圈圈</span>
                <span class="user-head"><img src="../dist/images/user_head.png" alt=""></span>
            </li>
        </ul>
    </div>
</div>
<!-- header start-->

<!-- content start-->
<div class="member-wrap">
    <div class="member-main layui-clear">
        <div class="member-left">
            <div class="member-left-hd mb-10">
                <div class="m-user-avatar layui-clear">
                    <div class="avatar-pic"><img src="../dist/images/user_avatar.png" alt=""></div>
                    <div class="avatar-info">
                        <div class="nickname">黑眼圈都合黑眼圈都合</div>
                        <a href="javascript:;" class="btn-change-avatar">更改头像</a>
                    </div>
                </div>
                <div class="m-user-level">当前级别：Level1</div>
            </div>
            <ul class="member-nav-list">
                <li class="list-item"><a href="m-online-course.html">线上课表</a></li>
                <li class="list-item"><a href="m-live-course.html">直播课表</a></li>
                <li class="list-item"><a href="m-offline-course.html">线下课表</a></li>
                <li class="list-item"><a href="m-course-comment.html">课程反馈</a></li>
                <li class="list-item active"><a href="m-test.html">我的测试</a></li>
                <li class="list-item"><a href="m-collection.html">我的收藏</a></li>
                <li class="list-item"><a href="m-order.html">我的订单</a></li>
                <li class="list-item"><a href="m-personal-info.html">个人信息</a></li>
                <li class="slide-bar"></li>
            </ul>
        </div>
        <div class="member-right">
            <div class="member-main-bar mb-10">
                <span class="marks"><i class="icon icon-survey"></i>问卷</span>
            </div>
            <div class="member-main-container">
                <form class="layui-form m-survey-form">
                    <div class="question-item">
                        <div class="item-title">1.问卷调差支持创建那些项目？（多选）</div>
                        <ul class="item-list">
                            <li>
                                <input type="checkbox" name="answer[2][2][]" lay-skin="primary" lay-filter="answer" value="1" title="A . 答案1设计">
                            </li>
                            <li>
                                <input type="checkbox" name="answer[2][2][]" lay-skin="primary" lay-filter="answer" value="2" title="B . 答案1设计 ">
                            </li>
                            <li>
                                <input type="checkbox" name="answer[2][2][]" lay-skin="primary" lay-filter="answer" value="3" title="C . 答案1设计">
                            </li>
                            <li>
                                <input type="checkbox" name="answer[2][2][]" lay-skin="primary" lay-filter="answer" value="4" title="D . 答案1设计">
                            </li>
                        </ul>
                    </div>
                    <div class="question-item">
                        <div class="item-title">2.创建那些项目？（单选）</div>
                        <ul class="item-list">
                            <li>
                                <input type="radio" name="answer[1][1]" value="1" title="A . 资产" lay-filter="answer">
                            </li>
                            <li>
                                <input type="radio" name="answer[1][1]" value="2" title="B . 权益" lay-filter="answer">
                            </li>
                            <li>
                                <input type="radio" name="answer[1][1]" value="3" title="C . 资金" lay-filter="answer">
                            </li>
                            <li>
                                <input type="radio" name="answer[1][1]" value="4" title="D . 负债" lay-filter="answer">
                            </li>
                        </ul>
                    </div>
                    <div class="question-item">
                        <div class="item-title">3.请为使用体验打分？</div>
                        <ul class="rate-list">
                            <li>
                                <div class="bar-title">网站导航</div>
                                <div class="rate-bar" data-value="1"></div>
                                <input type="hidden" name="answer[3][3][]" value="">
                            </li>
                            <li>
                                <div class="bar-title">视觉体验</div>
                                <div class="rate-bar" data-value="1"></div>
                                <input type="hidden" name="answer[3][3][]" value="">
                            </li>
                            <li>
                                <div class="bar-title">交互体验</div>
                                <div class="rate-bar" data-value="1"></div>
                                <input type="hidden" name="answer[3][3][]" value="">
                            </li>
                            <li>
                                <div class="bar-title">在线客服</div>
                                <div class="rate-bar" data-value="1"></div>
                                <input type="hidden" name="answer[3][3][]" value="">
                            </li>
                        </ul>
                    </div>
                    <div class="question-item">
                        <div class="item-title">4.若您对有意见与建议，欢迎填写在以下框中</div>
                        <div class="item-text">
                            <textarea name="answer[4][4]" placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="question-footer">
                        <button class="layui-btn layui-btn-radius btn-survey" lay-submit lay-filter="testForm">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- content end-->

<!-- footer start-->
<div class="footer-warp">
    <div class="footer-nav">
        <a href="#">关于我们</a>
        <a href="#">联系我们</a>
        <a href="#">帮助中心</a>
        <a href="javascript:;" class="ewm-link">
            <span>订阅号</span>
            <div class="ewm-box">
                <p>扫描二维码关注<br>iLeader微信服务号</p>
                <img src="../dist/images/ewm.png" alt="">
            </div>
        </a>
    </div>
    <div class="copyright">京ICP证030173号-1   京网文【2013】0934-983号     ©2019Baidu</div>
</div>
<!-- footer end-->
<script src="../dist/lib/jquery.min.js"></script>
<script src="../dist/lib/layui/layui.js"></script>
<script src="../dist/js/popup_all.js"></script>
<script src="../dist/js/m_all.js"></script>
<script>
    layui.use(['form', 'rate'], function(){
        var form = layui.form,
            rate = layui.rate;

        var ISANSWER = 0; // 是否完成答题 1 已完成

        function CheckIsOver() {
            var $item = $('.question-item');
            var asCount = 0;
            $item.each(function () {
                var $this = $(this);
                if ($this.find('input[type="radio"]:checked, input[type="checkbox"]:checked').length) {
                    asCount++;
                }
                if ($this.find('textarea').val()) {
                    asCount++;
                }
                if ($this.find('.rate-list > li').length) {
                    var $rate = $this.find('input[type="hidden"]');
                    var _index = 0;
                    for (var i = 0; i < $rate.length; i++) {
                        if ($rate.eq(i).val().length) {
                            _index++;
                        }
                    }
                    if (_index == $rate.length) {
                        asCount++;
                    }
                }
            });
            return ($item.length == asCount);
        }

        // 初始化星星
        $(".rate-bar").each(function(index, elem){
            var $this = $(this);
            rate.render({
                elem: $this,
                value: (ISANSWER === 1) ? $this.data('value') : '',
                readonly: (ISANSWER === 1) ? true : false,
                choose: function(value){
                    $this.next().val(value)
                }
            });
        });

        //提交
        form.on('submit(testForm)', function(data){
            if (!CheckIsOver()) {
                layer.msg('您还有题未答完', {icon: 5});
                return false;
            }
            $.post('', data.field, function(response){
                if (response.status == 1) {
                    layer.msg(response.msg, function () {
                        location.href=""
                    });
                }else{
                    layer.msg(response.msg);
                }
            });
            return false;
        });

    });
</script>
</body>
</html>